<template>
  <div :class="wrapClasses">
    <div :class="outerClasses">
      <div :class="innerClasses">
        <div
          :class="bgClasses"
          :style="bgStyle"><div
            :class="`${progressPrefixCls}-inner-text`"
            v-if="textInside"><slot name="progress-content"></slot></div></div>
        <slot name="button-close"></slot>
      </div>
    </div>
    <span
      v-if="!hideInfo && !textInside"
      :class="textClasses">
      <slot>
        <span
          v-if="isStatus"
          :class="textInnerClasses">
          <Icon :type="statusIcon"></Icon>
        </span>
        <span
          v-else
          :class="textInnerClasses">
          {{ percent }}%
        </span>
      </slot>
    </span>
  </div>
</template>
<script>
import Progress from '../progress/progress';
const prefixCls = 'haloe-progress';
const progressPrefixCls = 'haloe-upload-progress';
export default {
  extends: Progress,
  computed: {
    innerClasses () {
      return `${progressPrefixCls}-inner`;
    },
    bgClasses () {
      return `${progressPrefixCls}-bg`;
    },
  },
  data() {
    return {
      progressPrefixCls,
    }
  }
}
</script>

<style>
</style>
